<template>
  <div class="my-release">
    <div class="release-top">
      <div class="release-top-desc">
        <p>爬虫可视化</p>
        <p>实时加载爬取数据数量，所有数据支持下载至本地</p>
      </div>
      <div class="release-top-right">
        <el-button type="primary" @click="downData">下载数据</el-button>
      </div>
    </div>
    <div class="release-content" ref="releaseContent">
      <p v-if="record.list.length === 0" style="text-align: center; border-bottom: none; line-height: 300px">
        暂无实时爬取数据
      </p>
      <p v-for="(item, key) in record.list" :key="key">
        已爬取文章 {{ record.total + key }}条，正在爬取文章: 《{{ item.Title }}》 来自网站:
        {{ item.SiteName }} 文章发布时间：{{ item.ArticleTime }}
      </p>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, reactive, onBeforeUnmount, nextTick } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'MyRelease',
  setup() {
    const store = useStore();
    const router = useRouter();
    const releaseContent = ref();
    const record = reactive({
      timer: null,
      site_name: '',
      size: 20,
      total: 0,
      list: [],
    });
    const getSiteList = async () => {
      const data = await store.dispatch('task/querySiteList');
      const istwo = data.filter((item) => item.CrawlStatus === '2');
      if (istwo.length > 0) {
        record.site_name = istwo[0].SiteName;
        getTaskRecord();
        record.timer = setInterval(() => {
          getTaskRecord();
        }, 5000);
      }
    };

    const smoothScrollToBottom = (element) => {
      const start = element.scrollTop;
      const end = element.scrollHeight;
      const duration = 6000; // 滚动持续时间，单位为毫秒
      let startTime;

      function scroll(timestamp) {
        if (!startTime) startTime = timestamp;
        const elapsed = timestamp - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const easeProgress = easeOutCubic(progress); // 使用缓动函数来平滑滚动

        element.scrollTop = start + (end - start) * easeProgress;

        if (elapsed < duration) {
          requestAnimationFrame(scroll);
        }
      }
      requestAnimationFrame(scroll);
    };

    // 缓动函数，用于平滑滚动
    const easeOutCubic = (t) => {
      return 1 - Math.pow(1 - t, 3);
    };

    // 获取我的发布列表
    const getTaskRecord = async () => {
      const { data_list, total } = await store.dispatch('task/queryCrawlingList', {
        size: record.size,
        site_name: record.site_name,
      });
      record.total = total;
      if (data_list.length === 0) {
        record.timer && clearInterval(record.timer);
      }
      record.list.push(...data_list);
      nextTick(() => {
        smoothScrollToBottom(releaseContent.value);
      });
    };
    const downData = () => {
      router.push({ name: 'dataCollect' });
    };
    onMounted(() => {
      getSiteList();
    });
    onBeforeUnmount(() => {
      record.timer && clearInterval(record.timer);
    });
    return {
      releaseContent,
      record,
      downData,
    };
  },
});
</script>
<style lang="scss" scoped>
.my-release {
  .release-top {
    @extend %container;
    display: flex;
    justify-content: space-between;
    &-desc {
      display: flex;
      flex-direction: column;
      p {
        &:nth-child(1) {
          color: #282d30;
          font-size: 18px;
          font-weight: bold;
        }
        &:nth-child(2) {
          font-size: 12px;
          color: #848899;
          margin-top: 10px;
        }
      }
    }
    &-right {
      &::v-deep(.el-button) {
        background-color: #0054fe;
        border-color: #0054fe;
      }
    }
  }
  .release-content {
    @extend %container;
    @extend %scrollBar;
    overflow-y: auto;
    margin-top: 10px;
    height: calc(100vh - 180px);
    min-height: 300px;
    background: #2b2b2b;
    p {
      color: #818181;
      line-height: 50px;
      border-bottom: #818181 solid 1px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .submit-btn {
    text-align: right;
  }
  .table-expand {
    .el-form-item {
      margin-bottom: 0;
      .el-rate {
        margin: 10px 0;
      }
    }
  }
}
</style>
